<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv=X-UA-Compatible content="IE=edge"/>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>登录首页</title>
    <link rel="stylesheet" href="css/element/index.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<div id="app">
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">学生管理系统</div>
            <!-- 表单 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="account">
                    <el-input placeholder="账号" v-model="ruleForm.account" autocomplete="off">
                        <template slot="prepend"><i class="el-icon-user"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="密码" type="password" v-model="ruleForm.password" autocomplete="off">
                        <template slot="prepend"><i class="el-icon-lock"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input placeholder="验证码" v-model="ruleForm.code" autocomplete="off">
                        <template slot="append"><img :src="imageCode" class="valicode" @click="imageLoad" alt="验证码"
                                                     title="点击刷新"/></template>
                    </el-input>
                </el-form-item>
                <template>
                   &nbsp; &nbsp;  <el-radio v-model="radio" label="学生">学生</el-radio>
                    &nbsp; &nbsp; <el-radio v-model="radio" label="教师">教师</el-radio>
                    &nbsp; &nbsp; <el-radio v-model="radio" label="管理员">管理员</el-radio>
                </template>
                <el-form-item class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')" size="small">登录</el-button>
                    <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                </el-form-item>
                <p class="login-tips">忘记账号密码? 请联系管理员.......</p>
            </el-form>
        </div>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            var validateAccount = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    if (this.ruleForm.account !== '') {
                        this.$refs.ruleForm.validateField('password');
                    }
                    callback();
                }
            };
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.password !== '') {
                        this.$refs.ruleForm.validateField('code');
                    }
                    callback();
                }
            };
            var validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    account: '',
                    password: '',
                    code: '',
                },
                imageCode: '',
                radio: '学生',
                rules: {
                    account: [
                        {validator: validateAccount, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePassword, trigger: 'blur'}
                    ],
                    code: [
                        {validator: validateCode, trigger: 'blur'}
                    ]
                }
            };
        },
        // 生命周期方法
        created() {
            this.imageLoad();
        },
        methods: {
            // 点击刷新验证码
            imageLoad() {
                _this = this;
                axios.get('http://localhost:8080/login/getCode?t=' + new Date().getTime())
                    .then(res => {
                        _this.imageCode = res.data;
                    });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData = new FormData();
                        let loginUrl = 'http://localhost:8080/login/'
                        formData.append("code", this.ruleForm.code);
                        if (this.radio === '学生') {
                            loginUrl = loginUrl + 'student';
                            formData.append("sNo", this.ruleForm.account);
                            formData.append("sPwd", this.ruleForm.password);
                        } else if (this.radio === '教师') {
                            loginUrl = loginUrl + 'teacher';
                            formData.append("tNo", this.ruleForm.account);
                            formData.append("tPwd", this.ruleForm.password);
                        } else {
                            loginUrl = loginUrl + 'admin';
                            formData.append("adUsername", this.ruleForm.account);
                            formData.append("adPwd", this.ruleForm.password);
                        }
                        axios.post(loginUrl, formData)
                            .then(res => {
                                let r = res.data;
                                if (r.code !== 200) {
                                    this.$message({
                                        showClose: true,
                                        message: r.msg,
                                        type: 'error'
                                    });
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: r.msg,
                                        type: 'success'
                                    });
                                    // 登录成功后，把数据保存在客户端, JSON.stringify()把对象转JSON数据
                                    localStorage.setItem("user", JSON.stringify(r.data));
                                    localStorage.setItem("radio", this.radio);
                                    this.ruleForm = {}
                                    if (this.radio === '管理员'){
                                        //把id存入到客户端
                                        localStorage.setItem("adNo", r.data.adNo);
                                        // 转页面
                                        setTimeout(() => {
                                            location.href = "adminBackstage.html"
                                        }, 1000)
                                    }else if (this.radio === '学生'){
                                        //把id存入到客户端
                                        localStorage.setItem("id", r.data.id);
                                        //把学号存入到客户端
                                        localStorage.setItem("sNo", r.data.sno);
                                        //把学生等级存放的客户端
                                        localStorage.setItem("dengJi", r.data.dengJi);
                                        // 转页面
                                        setTimeout(() => {
                                            location.href = "studentBackstage.html"
                                        }, 1000)
                                    }else if (this.radio === '教师'){
                                        //把教师id存入到客户端
                                        localStorage.setItem("id", r.data.id);
                                        //把教师号存入到客户端
                                        localStorage.setItem("tNo", r.data.tno);
                                        // 转页面
                                        setTimeout(() => {
                                            location.href = "teacherBackstage.html"
                                        }, 1000)
                                    }
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>